<template>
	<view v-if="list.length > 0" class="dramaBoxAll" >
		<view v-if="fromPage === 'mine'" class="isMask" @click="isClose"></view>
		<view v-else class="isMask"  @click="adClick"></view>
		<view class="page-content-box">
			<slot name="topMess"></slot>
			<view class="dramaBox" v-if="!isCloseAni">
				<view v-if="payAmountCloseSwitch || type === 'isIaaAd'" style="display: flex;justify-content: flex-end;padding-right: 20px;" >
					<image @click.stop="closePopup" style="width: 28rpx;height: 28rpx;"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_adClose.png">
					</image>
				</view>
				<view class="popup-top-mess">
					<view class="dramaTitle" v-if="fromPage === 'mine'">
						<view class="dramaTitleLeft flex -align-center">
							充值{{ moneyName }}
							<image class="label-set"
								src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_hui_mark2.png">
							</image>
						</view>
					</view>
					<view class="flex align-end text-title-money" v-if="fromPage !== 'mine'">
						<text>解锁本集：</text>
						<text style="color: #E8592A;" class="num-box">{{ (videoInfo || {}).goodsLocks[0] ? (videoInfo || {}).goodsLocks[0].fruitNum : 0 }}</text>
						<text>{{ moneyName }}</text>
					</view>
					<view class="balanceBox" style="margin-bottom: 24rpx;">
						<view class="balanceRight">
							账户余额：
							<text style="color: #E8592A;">
								<!-- {{ balance | fruitNum10 }} -->
								{{ balance }}
							</text>
							{{ moneyName }}
						</view>
						<view @tap="handleViewAgree">
							<text>付费须知</text>
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>
				<view class="dramaContent">
					<view v-for="(item, index) in list" @click.stop="isChoose(index)" :key="index" class="outBox">
						<view v-if="item.moneyFen > 0">
							<!-- k币盒子 -->
							<view 
								class="money-box item dfc" 
								v-if="item.buttonType === 'PAY' && !item.specialOffer"
							>
								<view class="flex align-center sub-money-title">
									<text>
										{{ item.moneyFen }}
									</text>
									<view class="flex align-center" v-if="item.firstPresentTotal || item.presentTotal">
										<text>+</text>
										<text>
											{{ (item.firstPresentTotal ? item.firstPresentTotal : item.presentTotal) }}
										</text>
									</view>
									<text>{{ moneyName }}</text>
								</view>
								<view class="set-money-title">
									{{ item.moneyStr || '' }}
								</view>
								<view v-if="item.presentTotal || item.firstPresentTotal || (isMember && item.membershipTotal > 0)" class="button-view">
									{{
										isMember && item.membershipTotal > 0
										? '会员充值再赠' + item.membershipTotal / 100 + '元' + moneyName
										: item.firstPresentTotal
											? '多送' + item.firstPresentTotalStr + moneyName
											: '多送' + item.presentTotalStr + moneyName
									}}
								</view>
								<view v-if="item.firstPresentTotal">
									<image class="icon-zs" style="width: 81rpx;height: 40rpx;"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_first.png">
									</image>
								</view>
								<view v-if="!item.firstPresentTotal && item.isShowLabel">
									<image class="icon-zs" style="width: 92rpx;height: 88rpx;"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/icon_right.png">
									</image>
								</view>
								<view>
									<image v-if="item.gestureStatus === 'ON'" mode="widthFix" class="item-mark-gif"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/mark_gif.gif" />
								</view>
								<view v-if="viewImBox && currentIndexA == index" class="versionView"  @click.stop="() => {}">
									<button open-type="im" class="im-btn-box" :data-order-id="imObj.orderId" data-i-type="2" :data-im-id="imId"
										@im="imCallback" @error="onImError">
										<text class="image-box">支付{{ orderMoney }}元</text>
									</button>
								</view>
							</view>
							<!-- k币盒子带角标的 -->
							<view
								class="money-box-two item dfc" 
							 	v-if="item.buttonType === 'PAY' && item.specialOffer"
							>
								<view class="flex align-center sub-money-title">
									<text>
										{{ item.moneyFen }}
									</text>
									<view class="flex align-center" v-if="item.firstPresentTotal || item.presentTotal">
										<text>+</text>
										<text>
											{{ (item.firstPresentTotal ? item.firstPresentTotal : item.presentTotal) }}
										</text>
									</view>
									<text>{{ moneyName }}</text>
								</view>
								<view class="set-money-title">
									{{ item.moneyStr || '' }}
								</view>
								<view v-if="item.presentTotal || item.firstPresentTotal || (isMember && item.membershipTotal > 0)" class="button-view">
									{{
										isMember && item.membershipTotal > 0
										? '会员充值再赠' + item.membershipTotal / 100 + '元' + moneyName
										: item.firstPresentTotal
											? '多送' + item.firstPresentTotalStr + moneyName
											: '多送' + item.presentTotalStr + moneyName
									}}
								</view>
								<view v-if="item.firstPresentTotal">
									<image class="icon-zs" style="width: 81rpx;height: 40rpx;"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_first.png">
									</image>
								</view>
								<view v-if="!item.firstPresentTotal && item.isShowLabel">
									<image class="icon-zs" style="width: 92rpx;height: 88rpx;"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/icon_right.png">
									</image>
								</view>
								<view>
									<image 
										v-if="item.gestureStatus === 'ON'" 
										mode="widthFix" 
										class="item-mark-gif"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/mark_gif.gif" 
									/>
								</view>

								<view v-if="viewImBox && currentIndexA == index" class="versionView"  @click.stop="() => {}">
									<button open-type="im" class="im-btn-box" :data-order-id="imObj.orderId" data-i-type="2" :data-im-id="imId"
										@im="imCallback" @error="onImError">
										<text class="image-box">支付{{ orderMoney }}元</text>
									</button>
								</view>
							</view>
							<!-- 会员盒子 -->
							<view
								class="member-box item dfc" 
								v-if="item.buttonType === 'MEMBER'"
							>
								<view class="flex align-center sub-money-title">
									全站免费看
								</view>
								<view class="set-money-title">
									<text>{{ item.moneyStr }}</text>
                                    <text v-if="item.linePrice" style="font-size: 28rpx; font-weight:normal;text-decoration: line-through;margin-left: 10rpx;">{{ item.linePrice }}元</text>
								</view>
								<view class="button-view">
									{{ item.total }}{{ item.membershipTimeText }}会员特权
								</view>
								<block v-if="!(viewImBox && currentIndexA == index)">
									<text v-if="item.label && !['EMPTY', 'VIP', 'SUB'].includes(item.label)" class="icon-mark-two">{{ labelText(item.label) }}</text>
									<text v-if="item.label && ['SUB'].includes(item.label)" class="icon-mark-two">
										{{ item.linePrice ? `立减${(item.linePrice - (item.moneyFen / 100)).toFixed(2)}元` : '立减' }}
									</text>
									<image 
										v-if="item.label && item.label === 'VIP'" 
										mode="widthFix"  
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/dy_vip_mark.png" 
										style="width: 110rpx; height: 40rpx; position: absolute; left: -2rpx; top: -20rpx;">
									</image>
								</block>
								
								<view>
									<image 
										v-if="item.gestureStatus === 'ON' && !(viewImBox && currentIndexA == index)" 
										mode="widthFix" 
										class="item-mark-gif"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/mark_gif.gif" 
									/>
								</view>
								<view v-if="viewImBox && currentIndexA == index" class="versionView" @click.stop="() => {}">
									<button open-type="im" class="im-btn-box" :data-order-id="imObj.orderId" data-i-type="2" :data-im-id="imId"
										@im="imCallback" @error="onImError">
										<text class="image-box">支付{{ orderMoney }}元</text>
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="ssVip-box">
					<image 
						v-if="viewSsVipBtn" @tap="handleSubmitOrder"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/dy_sSVip.png" />
					<view v-if="viewImBox1" class="versionView1">
						<button open-type="im" class="im-btn-box" :data-order-id="imObj.orderId" data-i-type="2" :data-im-id="imId"
							@im="imCallback" @error="onImError">
							<text class="image-box1">支付{{ orderMoney }}元</text>
						</button>
					</view>
				</view>
				<view v-if="payInfoFlag" class="pay-info">
					<view class="pay-title" @tap="closePayInfo">
						<image class="pay-back" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/icon_nav_back.png">
						</image>
						<text>付费须知</text>
					</view>
					<view class="info">
						1、虚拟商品，一经购买不得退换
					</view>
					<view class="info">
						2、充值后K币可能有延迟，1小时未到账请在“我的” 页面联系客服；
					</view>
					<view class="info">
						3、未满18岁的未成年需要在监护人陪同下购买并观看短剧；
					</view>
					<view class="info">
						4、购买成功后，“K币”仅在抖音内本小程序中使用；
					</view>
					<view class="info1">
						5、购买成功后可在“我的”页面订单中心进行查看。
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require('../util/util.js');
// 抖音配置
let ttConfig = require("../util/ttConfigSet.js");
import { getOrderTtMess, intoPayPage, getLittleAppNowObj } from '@/util/ttPay'
export default {
	name: 'dramaList',
	props: {
		balance: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		compInfo: {
			type: Object,
			default: {}
		},
		videoInfo: {
			type: Object,
			default: {}
		},
		fromPage: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
		copyIntervalTime: {
			default: ''
		},
		copyLinkStatusIndex: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			imId: '',
			moneyName: this.moneyName,
			isCloseAni: false,
			isMember: false,
			chooseIndex: 0,
			tipsList: [
				'1.' + this.moneyName + '属于虚拟商品，一经购买不得退换；',
				'2.充值后' + this.moneyName + '可能有延迟，1小时内未到账请与客服联系；',
				'3.未满18岁的未成年应在父母或其他监护人的监护指导，同意下进行相关付费操作。'
			],
			isView: '',
			list: '',
			copyGroupLink: '', // 付费群口令
			copyGroupLinkId: '', // 付费群口令Id
			copyGroupLinkBefore: '', // 免费口令
			copyGroupLinkBeforeId: '', // 免费口令Id
			copyLinkStatus: false,
			viewSsVipBtn: false,
			versionView: false, // 是否展示跳转IM的版本
			viewImBox: false,
			imObj: {
				orderId: ''
			},
			orderMoney: 0,
			imType: 'default', // ssVip: 大会员
			payInfoFlag: false,
			currentIndexA: -1,
			viewImBox1: false,
			nowAppName: '', // 当前客户端
			payAmountCloseSwitch: getApp().globalData.payAmountCloseSwitch
		};
	},
	methods: {
		labelText(val) {
			return {
				'EMPTY': '无',
				'SUB': '立减',
				'LIMIT': '限时',
				'PREFERENTIAL': '特惠',
				'RECOMMEND': '推荐',
				'VIP': 'VIP',
			}[val || 'EMPTY']
		},
		textTime(val) {
			return {
				'DAY': '天',
				'WEEK': '周',
				'MONTH': '个月',
				'YEAR': '年'
			}[val || 'DAY']
		},
		adClick(){
			if(this.type == 'isIaaAd'){
				this.$emit('iaaClose');
			}
		},
		imCallback(e) {
			uni.setStorageSync('imJump', this.imType)
			console.log('客服回调信息', e)
		},
		onImError(e) {
			console.log('客服错误', e)
		},
		handleViewAgree() {
			this.payInfoFlag = true
			// uni.navigateTo({
			//           url: `/pages/toProtol/toProtol`
			//       })
		},
		closePayInfo() {
			this.payInfoFlag = false
		},
		// 会员订单提交
		handleSubmitOrder: util.throttle(async function () {
			try {
				uni.showLoading({
					title: '加载中'
				})
				// 获取ssVip会员信息
				let memberInfoSsVip = uni.getStorageSync('memberInfoSsVip')
				let {
					packageId
				} = memberInfoSsVip
				let configMess = await getApp().getMemberMess(this, packageId)
				// 模板提交
				let temObj = {
					packageId: packageId,
					moneyFen: configMess[0] ? configMess[0].nowMoneyFen : 36500
				}

				if (this.versionView) {
					this.viewImBox1 = false
					temObj.iosPayVersion = true
				} else {
					temObj.iosPayVersion = false
				}

				let resDataSub = await getApp().subMemberOrder(this, temObj)
				
				if(resDataSub && resDataSub.touTiaoGeneralPayApi) { // 通用支付
					this.imType = 'ssVip'
					this.payMessSsVipNew(resDataSub, 'MEMBER')
				} else { // 担保支付
					let {
						touTiaoApi,
						orderId
					} = resDataSub

					/**
					 * 区分跳转H5充值还是直接小程序拉取支付
					 * 22.2.0版本 且是IOS时跳转客服走H5充值
					 */
					if (this.versionView) {
						this.orderMoney = configMess[0].nowMoneyFen ? (configMess[0].nowMoneyFen / 100).toFixed(2) : 36500
						this.postMessageH5IosPay({
							order_id: touTiaoApi.orderId,
							order_token: touTiaoApi.orderToken,
							url: touTiaoApi.url,
							clientOrderId: orderId
						}, 'ssVip')
						this.imType = 'ssVip'
						return
					}
					let orderInfo = {
						order_id: touTiaoApi.orderId,
						order_token: touTiaoApi.orderToken
					}
					// 头条支付
					await getApp().ttPaySub(orderInfo)
					// 支付完成上报
					let orderMess = await getApp().czSucc(this, orderId)
					if (!orderMess) {
						if (!this.copyIntervalTime && this.copyLinkStatus) {
							this.copyWatchword(this.copyGroupLinkBefore)
							// 上报后台
							if (this.copyGroupLinkBefore) {
								this.callBackWardCopy(this.copyGroupLinkBeforeId)
							}
						}
					}
					if (orderMess && orderMess.payStatus == 'BE_READY') {
						if (this.copyLinkStatus && this.copyGroupLink) {
							this.copyWatchword(this.copyGroupLink)
							// 上报后台
							if (this.copyGroupLink) {
								this.callBackWardCopy(this.copyGroupLinkId)
							}
						}
						this.$emit('czSuccess', {
							type: 'ssVipSuccess'
						})
					}
				}
			} catch (error) {
				console.log(error)
			} finally {
				uni.hideLoading()
			}
		}, 2000),
		// 通用支付365
		async payMessSsVipNew(res, buttonType) {
			if(!['Douyin', 'douyin', 'devtools'].includes(this.nowAppName) && this.versionView) {
				uni.showToast({
					title: 'ios设备暂不支持此功能',
					icon: 'none'
				})
				return
			}
			// 咱们内部的OrderID
			let {
				orderId,
				touTiaoGeneralPayApi
			} = res
			let orderMessNew = await getOrderTtMess(touTiaoGeneralPayApi)
			if(orderMessNew) {
				// 抖音订单的OrderId
				let objPayView = {
					...orderMessNew
				}
				if(this.versionView) {
					objPayView.imId = this.imId
				} else {
					delete objPayView.imId
				}
				await intoPayPage(objPayView)
				// 同步跳转更新
				if(this.versionView) {
					uni.setStorageSync('imJump', this.imType)
					uni.setStorageSync('imJumpNewObj', {
						orderId: orderId
					})
				} else {
					// 咱们内部的OrderID
					this.getOrderInfo(orderId, buttonType)
				}
			}
		},
		isSure() {
			this.moneyClick(this.list[this.chooseIndex]);
		},
		isChoose(index) {
			this.currentIndexA = index
			console.log(index, '-----');
			this.moneyClick(this.list[index], index);
		},
		moneyClick: util.throttle(function (item, index) {
			this.viewImBox = false
			this.chooseIndex = index;
			console.log('item', item);
			uni.showLoading({
				title: '加载中'
			});

			if(item.buttonType === 'MEMBER') {
				this.imType = 'ssVip'
			}
			
			let header = {
				'content-type': 'application/json;charset=UTF-8',
				'episodic-drama-id': this.videoInfo.id ? String(this.videoInfo.id) : '0',
				'compilations-id': this.videoInfo.compilationsId ? String(this.videoInfo.compilationsId) : '0'
			}
			if (this.versionView) {
				header['ios-pay-version'] = true
			} else {
				header['ios-pay-version'] = false
			}
			this.zwyRequest({
				header: header,
				method: 'post',
				url: '/wealth/api/pay_client/top_up_preorder',
				data: { moneyFen: item.moneyFen, payUse: item.presentUse, useId: 3, buttonId: item.id }
			}).then(async res => {
				uni.hideLoading();
				console.log('moneyClick', res);
				if (res) {
					if(res.touTiaoGeneralPayApi) { // 是否是新支付模式（通用支付）
						this.payMessSsVipNew(res, item.buttonType)
					} else {
						let orderInfo = {
							order_id: res.touTiaoApi.orderId,
							order_token: res.touTiaoApi.orderToken
						}
						/**
						 * 区分跳转H5充值还是直接小程序拉取支付
						 * 22.2.0版本 且是IOS时跳转客服走H5充值
						 */
						if (this.versionView) {
							this.orderMoney = item.moneyFen ? (item.moneyFen / 100).toFixed(2) : 0
							this.postMessageH5IosPay({
								...orderInfo,
								url: res.touTiaoApi.url,
								clientOrderId: res.orderId
							}, 'cz')
						} else {
							uni.pay({
								service: 5,
								orderInfo: orderInfo,
								success: resPay => {
									console.log('success', resPay);
									this.getOrderInfo(res.orderId, item.buttonType);
								},
								fail: resPay => {
									console.log('fail', resPay);
								}
							});
						}
					}
				}
			});
		}, 500),
		getOrderInfo(orderId, buttonType) {
			this.zwyRequest({
				header: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				method: 'post',
				url: `/wealth/api/pay_order/done?orderId=${orderId}`,
				data: { orderId: orderId }
			}).then(res => {
				console.log('getOrderInfo', res);
				if (!res) {
					console.log('this.copyIntervalTime-----', this.copyIntervalTime)
					if (!this.copyIntervalTime && this.copyLinkStatus) {
						this.copyWatchword(this.copyGroupLinkBefore)
						// 上报后台
						if (this.copyGroupLinkBefore) {
							this.callBackWardCopy(this.copyGroupLinkBeforeId)
						}
					}
				}
				// this.getBalance();
				if (res && res.payStatus == 'BE_READY') {
					uni.showToast({
						title: '充值成功',
						icon: 'none'
					});
					tt.showFavoriteGuide({
						type: "bar",
						content: "一键添加到「我的小程序」",
						position: "bottom",
						success(res) {
							console.log("引导组件展示成功", res);
						},
						fail(err) {
							console.log("引导组件展示失败", err);
						},
					});
					if (this.copyLinkStatus && this.copyGroupLink) {
						this.copyWatchword(this.copyGroupLink)
						// 上报后台
						if (this.copyGroupLink) {
							this.callBackWardCopy(this.copyGroupLinkId)
						}
					}
					if(buttonType === 'MEMBER') {
						this.$emit('czSuccess', {
							type: 'ssVipSuccess'
						})
					} else {
						this.$emit('czSuccess');
					}
					// this.getDyDiversion(2,1)
				}
			});
		},
		async getDyDiversion(num,diversionTarget) {
			let res = await this.zwyRequest({
				method: 'get',
				url: `/douYin/diversion?diversionScene=${num}&diversionTarget=${diversionTarget}`
			})
			if (res && res[0]) {
				getApp().globalData.dyInsertMess=res[0]
				getApp().globalData.dyInsertMess.viewDyPopup = true
			}
			console.log(getApp().globalData.dyInsertMess, 'getApp().globalData.dyInsertMess------');
		},
		// 付费口令暂时不用了
		copyWatchword(val) {
			console.log('copyVal', val)
			// uni.setClipboardData({
			// 	data: val,
			// 	success: function() {}
			// });
		},
		isClose() {
			this.$emit('isClose');
			this.isCloseAni = true;
		},
		closePopup() {
			if(this.type === 'isIaaAd') {
				this.$emit('iaaClose');
			} else {
				this.$emit('isClose',{ type: 'closePopup' });
				this.isCloseAni = true;
			}
		},
		dramaClick(index) {
			if (this.currentIndex != index) {
				this.$emit('changeTab', index); //设置swiper的第几页
			}
		},
		async getCopyLink() {
			try {
				let res = await this.getConfigDouyin()
				let wardObjBefore = await this.getWardConfig(0)
				let wardObj = await this.getWardConfig(1)
				this.copyLinkStatus = res.copyLinkStatus
				this.copyGroupLink = wardObj.content
				this.copyGroupLinkId = wardObj.id || ''
				this.copyGroupLinkBefore = wardObjBefore.content || ''
				this.copyGroupLinkBeforeId = wardObjBefore.id || ''
			} catch (error) {
				console.log(error)
			}
		},
		async postMessageH5IosPay(obj, type) {
			try {
				let {
					clientOrderId,
					order_id,
					order_token,
					url
				} = obj
				this.imObj.orderId = order_id
				this.imObj.orderToken = order_token
				this.imObj.url = url

				this.zwyRequest({
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					method: 'post',
					url: `/wealth/api/douyin_im/saveH5PayUrl`,
					data: {
						orderId: clientOrderId,
						dyOrderId: order_id,
						dyH5PayUrl: url,
						dyH5PayToken: order_token
					}
				}).then(res => {
					console.log(res)
					this.viewImBox1 = false
					this.viewImBox = false
					setTimeout(() => {
						// 展示IM按钮
						if (type == 'ssVip') {
							this.viewImBox1 = true
						} else {
							this.viewImBox = true
						}
					},250)

				})


			} catch (error) {
				console.log(error)
			}
		}
	},
	async created() {
		//#ifdef MP-TOUTIAO
		// 获取配置信息
		let ttAccountInfo = tt.getEnvInfoSync() && tt.getEnvInfoSync().microapp
		if (ttAccountInfo && ttAccountInfo.appId) {
			let ttConfigMess = ttConfig[ttAccountInfo.appId]
			this.imId = ttConfigMess.imId
		}
		this.payAmountCloseSwitch = getApp().globalData.payAmountCloseSwitch

		// // 清除口令
		// if(!this.copyIntervalTime && this.copyLinkStatusIndex) {
		// 	this.copyWatchword('')
		// }
		//#endif
		let messConfig = await getLittleAppNowObj()
		let nowVerSion = messConfig.version
		this.nowAppName = messConfig.appName
		let isIos = getApp().globalData.isIos
		let versionList = [
			'22.2.1', '22.2.2', '22.2.3', '22.2.4', '22.2.0', '22.3.0', '22.3.1', '22.3.2', '22.4.0', '22.4.1', '22.4.2', '22.4.3', '22.5.0', '22.5.1', '22.5.2'
		]
		let nowVerSionArr = nowVerSion.split('.')
		//  剧多多配合测试的判断限制非抖音端支付
		if (isIos && (versionList.includes(nowVerSion) || (+nowVerSionArr[1] > 2 && +nowVerSionArr[0] > 21) || +nowVerSionArr[0] > 22 || nowVerSion === '6.6.3')) {
			this.versionView = true
		} else {
			this.versionView = false
		}
		this.viewSsVipBtn = getApp().globalData.isConfigSsVip
		this.zwyRequest({
			method: 'GET',
			header: {
				'content-type': 'application/json;charset=UTF-8',
				'compilations-id': (this.videoInfo || {}).compilationsId || 0
			},
			url: '/wealth/api/pay_setting/v2/pay_settings'
		}).then(res => {
			console.log('showCz', res);
			if (!res) {
				return;
			}
			this.$emit('getListSuccess');
			var arr = [];
			if (res && res.length > 0) {
				arr = res.map((a) => {
					a.moneyStr = parseFloat((a.moneyFen / 100).toFixed(2)) + '元';
					a.presentTotalStr = parseFloat((a.presentTotal / 100).toFixed(2)) + '元';
					a.firstPresentTotalStr = parseFloat((a.firstPresentTotal / 100).toFixed(2)) + '元';
					a.specialOffer = a.backGroundColor === '#FF3752' ? true : false
					a.isShowLabel = a.label === 'EMPTY' ? false : true
					a.membershipTimeText = this.textTime(a.membershipTime)
					return a;
				});
			}
			this.list = arr;

			if (this.versionView) {
				// this.isChoose(0)
			}
		});
	},
	onReady() {
		this.isView = '';
		setTimeout(() => {
			this.isView = 'id' + this.currentIndex;
		}, 300);
	}
};
</script>

<style lang="scss" scoped>
.item .icon-zs {
	position: absolute;
	width: 84rpx;
	height: 84rpx;
	top: 0;
	right: -2rpx;
}

.item .icon-zs-text {
	position: absolute;
	width: 60rpx;
	height: 60rpx;
	top: -2rpx;
	right: -2rpx;
	z-index: 99;
	color: #382214;
	transform: rotate(45deg);
	line-height: 48rpx;
	transform-origin: center center;
	display: inline-block;
	font-size: 26rpx;
	font-weight: bold;
}

.item .icon-sq {
	position: absolute;
	width: 84rpx;
	height: 84rpx;
	top: 0;
	right: 0;
}

.font-red {
	color: #FF7200;
}

.desBox {
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 13rpx;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
}

.label {
	background-color: #3E3E45 !important;
	color: #FFFFFF;
	font-size: 26rpx;
	padding: 6rpx 12rpx;
	font-weight: normal;
	margin-left: 10rpx;
	border-radius: 30rpx;
	margin-left: 10rpx;
}

.dramaTitleLeft {
	font-size: 32rpx;
	font-weight: bold;
}

.chooseBg {
	// border: 3rpx solid #FFFFFF !important;
	// background-color: #3E3E45 !important;
	border: 2px solid #FB4B06 !important;
	background: #FFEFEF !important;
}

.moneyButtonBox {
	width: 100vw;
	height: calc(env(safe-area-inset-bottom) + 140rpx);
	display: flex;
	align-items: center;
	justify-content: center;

	.moneyButton {
		.buttonTop {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #4d3507 !important;
			// color: #000000;
		}

		height: 90rpx;
		width: 80vw;
		line-height: 90rpx;
		border-radius: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// background-color: #FFFFFF;
		background: linear-gradient(179deg, #F8CEBC 0%, #DAA880 100%) !important;
		color: #624438;
		font-size: 32rpx;
		font-weight: bold;
	}
}

.czTipsBox {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	font-size: 12px;
	color: #999999;
}

.tipsLine {
	width: 97%;
}

.balanceBox {
	.balanceRight {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #5A5A5A;

	}

	.balanceLeft {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	color: #ADADAD;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6rpx;
}

.isLock {
	position: absolute;
	right: 0;
	top: 0;
	width: 40rpx;
	height: 29rpx;
}

.isChoose {
	height: 32rpx;
	width: 26rpx;
}

.dramaContent {
	flex-wrap: wrap;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	// padding-bottom: env(safe-area-inset-bottom);
	padding-left: 42rpx;
	padding-right: 42rpx;
}

.dramaItem {
	position: relative;
	margin-right: 14rpx;
	margin-bottom: 14rpx;
	color: #ffffff;
	font-size: 24rpx;
	width: 86rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86rpx;
	background: #2a2a2a;
	border-radius: 8rpx;
}

.dramaBoxAll {
	position: fixed;
	z-index: 103;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
}

.isMask {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 101;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.8);
}

.dramaBox {
	.dramaTitle {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	color: #000;
	width: 100vw;
	background-color: #fff;
	padding: 32rpx 0 40rpx 0;
	border-radius: 39rpx 39rpx 0rpx 0rpx;
}

@keyframes isShowAni {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.isShowAni {
	animation: isShowAni .3s both ease-out;
}

@keyframes isCloseAni {
	from {
		transform: translateY(0%);
	}

	to {
		transform: translateY(100%);
	}
}

.isCloseAni {
	animation: isCloseAni .3s both ease-out;
}

.outBox {
	display: flex;
	align-items: center;
	justify-content: center;
	// position: absolute;
}

.outBox1 {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
}

.isCenter {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.8);
	animation: show11 0.2s linear 0s 1 normal none running;
}

.specialOffer {
	background-color: #ff3752;
}

.specialOfferBlack {
	color: #FFFFFF;
}

.specialOfferWhite {
	color: #ffffff;
}

.dfc {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tit {
	font-size: 30rpx;
	color: #5d5d5d;
	height: 40rpx;
	line-height: 40rpx;
}

.h2 {
	height: 60rpx;
	padding-left: 20rpx;
	line-height: 60rpx;
	font-size: 26rpx;
	position: relative;
	color: #5d5d5d;
}

.balance {
	position: absolute;
	right: 33rpx;
	font-size: 24rpx;
	color: #636363;
	top: 0;
	bottom: 0;
	margin: auto;
}

.h2 .icon-wx {
	display: none;
	width: 54rpx;
	height: 50rpx;
	margin-right: 16rpx;
}

.item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 10rpx 0;
	width: 320rpx;
	height: 220rpx;
	background: linear-gradient(225deg, #F6F6F6 0%, #FFFFFF 100%);
	border-radius: 15rpx;
	border: 2rpx solid #EAEAEA;
	margin-bottom: 30rpx;
	position: relative;
	color: #410700;

	&.money-box {
		.set-money-title {
			font-size: 42rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #410700;
			line-height: 59rpx;
			margin: 6rpx 0 9rpx;
		}

		.sub-money-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #410700;
			line-height: 45rpx;
		}
		
		.button-view {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FF6E17;
			line-height: 45rpx;
		}
	}
	&.money-box-two{
		background: linear-gradient(225deg, #FFF4EF 0%, #FEFDF9 100%);
		border: 2rpx solid #EAA36E;
		.set-money-title {
			font-size: 42rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #F88839;
			line-height: 59rpx;
			margin: 6rpx 0 9rpx;
		}

		.sub-money-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #6A2F15;
			line-height: 45rpx;
		}
		
		.button-view {
			width: 260rpx;
			height: 54rpx;
			background: linear-gradient(90deg, #E68763 0%, #EB533D 100%);
			border-radius: 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 54rpx;
			text-align: center;
		}
	}

	&.member-box {
		background: linear-gradient(135deg, #F08F67 0%, #EA4735 100%);
		border: 2rpx solid #CD3431;
		.set-money-title {
			font-size: 42rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FFEFD6;
			line-height: 59rpx;
			margin: 6rpx 0 9rpx;
		}

		.sub-money-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 45rpx;
		}
		
		.button-view {
			width: 260rpx;
			height: 54rpx;
			background: linear-gradient(90deg, #FFF1E4 0%, #FFDDB6 100%);
			border-radius: 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #410700;
			line-height: 54rpx;
			text-align: center;
			border: 1rpx solid #FFFCEB;
		}
		.icon-mark-two {
			position: absolute;
			left: -2rpx;
			top: -20rpx;
			padding: 0 24rpx;
			letter-spacing: 4rpx;
			height: 40rpx;
			background: linear-gradient(90deg, #686568 0%, #3C3837 100%);
			border-radius: 20rpx 0rpx 20rpx 0rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFE9C9;
		}
	}
}

.versionView {
	position: absolute;
	top: -4rpx;
	left: -4rpx;
}


.item .money {
	font-size: 34rpx;
	line-height: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 4rpx;
}

.item .count {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;

}

.countColor {
	color: #ff7200;
}

.present {
	width: 100%;
	height: 52rpx;
	line-height: 52rpx;
	border-radius: 0 0 10rpx 10rpx;
	background: #E1E1E1;
	// margin-top: 16rpx;
	position: absolute;
	bottom: 0;
	color: #181818;
	// color: #ff7200;
}

.specialOfferWhite1 {
	background: #FB4B06 !important;
	color: #fff !important;
}

.xinshouImg {
	position: absolute;
	left: 0;
	right: 0;
	top: -20rpx;
	width: 100%;
	height: 69rpx;
	margin: auto;
}

.item .icon-zs {
	position: absolute;
	width: 84rpx;
	height: 84rpx;
	top: -2rpx;
	right: -2rpx;
}

.item-mark-gif {
	position: absolute;
	top: 90rpx;
	right: -40rpx;
	width: 109rpx;
	z-index: 9;
}

.item .icon-sq {
	position: absolute;
	width: 84rpx;
	height: 84rpx;
	top: 0;
	right: 0;
}

.font-red {
	color: #FB4B06;
}

@keyframes show11 {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes show111 {
	from {
		transform: translateY(120%);
	}

	to {
		transform: translateY(0);
	}
}

.tipsBox {
	width: 570rpx;
	height: 362rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
}

.tipsDes {
	width: 540rpx;
	padding: 95rpx 0 77rpx 0;
	margin: auto;
	position: relative;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 30rpx;
}

.tipsBtnBox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.leftBtn,
.rightBtn {
	display: flex;
	width: 253rpx;
	height: 80rpx;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #ffffff;
	border-radius: 16rpx;
}

.leftBtn {
	background-color: #d8d8d8;
	margin-right: 24rpx;
}

.rightBtn {
	background-color: #ff7200;
}

.dingyueBox {
	width: 570rpx;
	height: 480rpx;
	position: relative;
	background-color: #ffffff;
	border-radius: 12rpx;
}

.dingyueBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 270rpx;
	height: 72rpx;
	position: absolute;
	top: 334rpx;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #07c160;
	border-radius: 8rpx;
	color: #ffffff;
}

.dingyueIcon {
	width: 36rpx;
	margin-right: 12rpx;
	height: 30rpx;
}

.dingyueTitle {
	font-size: 32rpx;
	position: absolute;
	top: 114rpx;
	left: 0;
	right: 0;
	margin: auto;
	color: #FFFFFF;
	text-align: center;
	font-weight: 500;
}

.dingyueTips {
	position: absolute;
	top: 203rpx;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 28rpx;
	text-align: center;
}

.balance {
	position: absolute;
	right: 33rpx;
	font-size: 24rpx;
	color: #636363;
	top: 0;
	bottom: 0;
	margin: auto;
}

.title {
	padding-left: 20rpx;
	height: 100rpx;
	line-height: 100rpx;
}

.h2 {
	width: 100%;
	height: 60rpx;
	margin-bottom: 10rpx;
	line-height: 60rpx;
	font-size: 26rpx;
	position: relative;
	color: #5d5d5d;
}

.moneyBox {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	z-index: 999;
	top: 0;
	background-color: rgba(0, 0, 0, 0.493);
}

.dramaListBox {
	padding: 0 4%;
	position: absolute;
	bottom: 0;
	left: 0;
	flex-direction: column;
	width: 100%;
	height: 63%;
	background-color: #ffffff;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
}

.label-set {
	width: 148rpx;
	height: 37rpx;
	margin: 4rpx 0 0 24rpx;
}

.color-gold {
	color: #ECBFA4;
}

.popup-top-mess {
	padding: 0 42rpx;
	// background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/popup_top_bg.png') no-repeat center center;
	// background-size: 100% 100%;
}

.ssVip-box {
	margin-bottom: calc(48rpx + env(safe-area-inset-bottom));
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	image {
		width: 666rpx;
		height: 156rpx;
	}
}

.versionView1 {
	position: absolute;
	top: 0rpx;
	left: 50%;
	transform: translateX(-50%);
}

.image-box1 {
	width: 666rpx;
	height: 156rpx;
	border-radius: 14rpx;
	background: linear-gradient(179deg, #F8CEBC 0%, #DAA880 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #624438;
	font-weight: 600;
	font-size: 32rpx;

	// width: 0;
	// height: 0;
	// transition: all 0.3s linear;
	&.active {
		background: #38364B;
		color: #FFFFFF;
	}
}

.btn-box {
	margin: 0;
	padding: 0;
	background: transparent;
	line-height: inherit;

	.item {
		padding: 24rpx 0;
	}
}

.im-btn-box {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	background: none;
	line-height: inherit;

	.image-box {
		width: 322rpx;
		height: 222rpx;
		border-radius: 15rpx;
		background: linear-gradient(179deg, #F8CEBC 0%, #DAA880 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #624438;
		font-weight: 600;
		font-size: 32rpx;

		// width: 0;
		// height: 0;
		// transition: all 0.3s linear;
		&.active {
			background: #38364B;
			color: #FFFFFF;
		}
	}
}

.pay-info {
	width: 100vw;
	/* height: 1100rpx; */
	position: absolute;
	/* left: 0; */
	bottom: 0;
	z-index: 99999;
	color: white;
	background-color: #fff;
	padding: 0 35rpx;
	box-sizing: border-box;
	transition: all 0.4s;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	color: #5D5D5D;
	border-radius: 39rpx 39rpx 0px 0px;
	padding-bottom: 70rpx;
	border: 1px solid #ccc;
}

.pay-back {
	width: 20rpx;
	height: 36rpx;
	margin-right: 25rpx;
}

.pay-title {
	display: flex;
	align-items: center;
	font-size: 36rpx;
	font-weight: 500;
	color: #5D5D5D;
	margin-top: 40rpx;
	margin-bottom: 30rpx;
}

.info {
	border-bottom: 1px solid #D4D4D4;
	padding: 20rpx 0;
	line-height: 20px;
}

.info1 {
	padding: 20rpx 0;
	line-height: 20px;
}

.page-content-box {
	position: absolute;
	z-index: 102;
	bottom: 0;
}

.text-title-money {
	color: #5A5A5A;
}
</style>